<template>
	<view>
			<My-search @Myclick="SearchClick"></My-search>
		<view class="care-bigBox" style="display:flex">
			<scroll-view class="bigBox-left" scroll-y :style="{height:windowHeight+'px'}" >
				<block v-for="(item,i) in cateData" :key="i">
						<view :class="{active:index===i}" @click="chenIndex(i,item)">{{item.cat_name}}</view>
				</block>  
			</scroll-view>
			<scroll-view scroll-y :scroll-top="scrollTop"  class="bigBox-right" :style="{height:windowHeight+'px'}">
			  <block v-for="(item2,i2) in children2" :key="i2">
				  <view class="catetitle">
					  {{item2.cat_name}}
					  </view>
					 <view class="cateList" >
						 <view  class="cateContent" v-for="(item3,i3) in item2.children" :key="i3" @click="goodsList(item3.cat_id)">
						 	 <image :src="item3.cat_icon"></image>	 
							 <text>{{item3.cat_name}}</text>
						 </view>
					 </view>			  
			  </block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
              windowHeight:"",
			  index:0,
			  cateData:"",
			  children2:"",
			  scrollTop:0
			};
		},
		onLoad(){
			const {windowHeight}=uni.getSystemInfoSync()
		this.getCate()
			this.windowHeight=windowHeight-50  //获取不同设备展示不同屏幕宽度
		},
		methods:{
			SearchClick(){
				uni.navigateTo({
					url:"/subpkg/search/search"
				})
			},
			chenIndex(index,cart){
				this.index=index
				console.log(cart)
				this.children2=cart.children
				this.scrollTop=this.scrollTop===0?1:0
			},
			async getCate(){
				const {data:res}=await uni.$http.get("/api/public/v1/categories")
				if(res.meta.status!==200) return uni.$showMsg()
				 this.cateData=res.message
				 this.children2=this.cateData[0].children
				
			},
			goodsList(item2){
				console.log(item2)
				uni.navigateTo({
				 url:"/subpkg/goods_list/goods_list?cid="+item2
				})
			},
			setBadge(){
				uni.setTabBarBadge({
					index:2,
				text:uni.$Store.getters.total>0?uni.$Store.getters.total+"":this.removeBadge()
				})
			},
			removeBadge(){
				uni.removeTabBarBadge({
					index:2
				})
			
			}
		},
	onShow(){
		this.setBadge()
	}
	}
</script>

<style lang="scss">
   .bigBox-left{
	   width:320rpx;
	   text-align: center;
	   
	   view{
		   height:130rpx;
		   line-height:130rpx;
		   background-color: #F7F7F7;
		   position: relative;
		
	   }
	   .active{
		   background-color: #FFFFFF;
	   }
	  
	 .active::before{
	  content: "";
	  display: block;
	  position: absolute;
	  width:4.5rpx;
	  height:80rpx;
	  background-color: red;
	  top:50%;
	  left:0;
	  transform:translateY(-50%)
	 }
   }
   .bigBox-right{
	   
	   .catetitle{
		   text-align:center;
		   font-weight:600;
		  
	   }
   }
   .cateList{
	      display:flex;
		  flex-wrap:wrap;
   }
   .cateContent{
   			    display:flex;
				flex-direction:column;
				justify-content: center;
				align-items: center;
   				width: 33.3%;
   				height:200rpx;
   			   image{
   				   width:60px;
   				   height:60px;
   			   }
			   text{
				   font-size:12px
			   }
   }
</style>
